Visual lab

Feature · cdn

CDN

Every published site and every asset is served from Blutui's global CDN: cached at the edge, close to the visitor, so pages and images arrive in milliseconds.

shipped 3 variants On the board →
v1

The edge, on a globe

hover plays while hovered

A blueprint figure: a dotted globe with every edge location a citron marker and the Sydney origin an ink one, beside a log of what the live edge just served. The pointer spins the globe and the edge nearest it goes live: a packet leaves the origin along a great circle to fill it, three hits pulse out, and the log refills line by line. Without a pointer the globe drifts east and the live edge walks the world. Rest is Australasia facing you with Auckland live.

views/components/visuals/cdn/v1.html

Static · three placements

Bento card · 320px Static
CDN — Edge network Fig. 26
27 edge locations EdgeOrigin

AKL50-P1

Auckland · 3 hits · 1 miss

  • hero.webpmiss120 ms
  • app.jshit11 ms
  • case-kea.webphit16 ms
  • inter.woff2hit21 ms
Origin · ap-southeast-2 · Sydney
Feature row · 560px Static
CDN — Edge network Fig. 26
27 edge locations EdgeOrigin

AKL50-P1

Auckland · 3 hits · 1 miss

  • hero.webpmiss120 ms
  • app.jshit11 ms
  • case-kea.webphit16 ms
  • inter.woff2hit21 ms
Origin · ap-southeast-2 · Sydney
Hero figure · 880px Static
CDN — Edge network Fig. 26
27 edge locations EdgeOrigin

AKL50-P1

Auckland · 3 hits · 1 miss

  • hero.webpmiss120 ms
  • app.jshit11 ms
  • case-kea.webphit16 ms
  • inter.woff2hit21 ms
Origin · ap-southeast-2 · Sydney

Animated · hover

Feature row · 560px
CDN — Edge network Fig. 26
27 edge locations EdgeOrigin

AKL50-P1

Auckland · 3 hits · 1 miss

  • hero.webpmiss120 ms
  • app.jshit11 ms
  • case-kea.webphit16 ms
  • inter.woff2hit21 ms
Origin · ap-southeast-2 · Sydney
c1

Hit from the edge

cutout

once one pass, holds

Cutout on a navy ground: Chrome with the Kererū site open and DevTools docked at the bottom on the Network panel, cropped at the right and running off the bottom. Nothing in Blutui's own UI shows the CDN, so the argument is made where the visitor feels it. The requests land row by row and their waterfall bars grow, the cursor arrives on the hero image row, a press, and the Headers pane slides in on the response from the edge: x-cache: Hit from cloudfront, the Auckland PoP, a year of cache-control. At card width the pane sits under the first rows as Chrome does when narrow; the waterfall shows from row width and the full header list at hero.

views/components/visuals/cdn/c1.html

Static · three placements

Bento card · 320px Static
kereru.co.nz
ElementsConsoleSourcesNetworkPerformanceMemoryApplication» ⋮×
Preserve log Disable cache No throttling
NameStatusTypeSizeTime
kereru.co.nz200document14.2 kB38 ms
global.css200stylesheet8.1 kB12 ms
hero.jpg?width=1440&format=webp200webp96.4 kB21 ms
app.js200script24.6 kB14 ms
space-grotesk.woff2200font41.0 kB18 ms
team-offsite.jpg?width=800&format=webp200webp38.2 kB16 ms
case-kea.jpg?width=800&format=webp200webp22.9 kB15 ms
kereru-logo.svg200svg+xml3.1 kB9 ms
inter.woff2200font36.4 kB17 ms
pattern-grid.png?format=webp200webp4.8 kB11 ms
favicon.ico200x-icon1.2 kB8 ms
case-toroa.jpg?width=800&format=webp200webp27.5 kB14 ms
case-kokako.jpg?width=800&format=webp200webp31.0 kB15 ms
map-tile.png?format=webp200webp6.6 kB10 ms
× HeadersPreviewResponseInitiatorTimingCookies

Response Headers Raw

age84213

cache-controlpublic, max-age=31536000, immutable

content-typeimage/webp

via1.1 8f2a1c3e7b5d.cloudfront.net (CloudFront)

x-amz-cf-popAKL50-P1

x-cacheHit from cloudfront

Feature row · 560px Static
kereru.co.nz
ElementsConsoleSourcesNetworkPerformanceMemoryApplication» ⋮×
Preserve log Disable cache No throttling
NameStatusTypeSizeTime
kereru.co.nz200document14.2 kB38 ms
global.css200stylesheet8.1 kB12 ms
hero.jpg?width=1440&format=webp200webp96.4 kB21 ms
app.js200script24.6 kB14 ms
space-grotesk.woff2200font41.0 kB18 ms
team-offsite.jpg?width=800&format=webp200webp38.2 kB16 ms
case-kea.jpg?width=800&format=webp200webp22.9 kB15 ms
kereru-logo.svg200svg+xml3.1 kB9 ms
inter.woff2200font36.4 kB17 ms
pattern-grid.png?format=webp200webp4.8 kB11 ms
favicon.ico200x-icon1.2 kB8 ms
case-toroa.jpg?width=800&format=webp200webp27.5 kB14 ms
case-kokako.jpg?width=800&format=webp200webp31.0 kB15 ms
map-tile.png?format=webp200webp6.6 kB10 ms
× HeadersPreviewResponseInitiatorTimingCookies

Response Headers Raw

age84213

cache-controlpublic, max-age=31536000, immutable

content-typeimage/webp

via1.1 8f2a1c3e7b5d.cloudfront.net (CloudFront)

x-amz-cf-popAKL50-P1

x-cacheHit from cloudfront

Hero figure · 880px Static
kereru.co.nz
ElementsConsoleSourcesNetworkPerformanceMemoryApplication» ⋮×
Preserve log Disable cache No throttling
NameStatusTypeSizeTime
kereru.co.nz200document14.2 kB38 ms
global.css200stylesheet8.1 kB12 ms
hero.jpg?width=1440&format=webp200webp96.4 kB21 ms
app.js200script24.6 kB14 ms
space-grotesk.woff2200font41.0 kB18 ms
team-offsite.jpg?width=800&format=webp200webp38.2 kB16 ms
case-kea.jpg?width=800&format=webp200webp22.9 kB15 ms
kereru-logo.svg200svg+xml3.1 kB9 ms
inter.woff2200font36.4 kB17 ms
pattern-grid.png?format=webp200webp4.8 kB11 ms
favicon.ico200x-icon1.2 kB8 ms
case-toroa.jpg?width=800&format=webp200webp27.5 kB14 ms
case-kokako.jpg?width=800&format=webp200webp31.0 kB15 ms
map-tile.png?format=webp200webp6.6 kB10 ms
× HeadersPreviewResponseInitiatorTimingCookies

Response Headers Raw

age84213

cache-controlpublic, max-age=31536000, immutable

content-typeimage/webp

via1.1 8f2a1c3e7b5d.cloudfront.net (CloudFront)

x-amz-cf-popAKL50-P1

x-cacheHit from cloudfront

Animated · once

Feature row · 560px
kereru.co.nz
ElementsConsoleSourcesNetworkPerformanceMemoryApplication» ⋮×
Preserve log Disable cache No throttling
NameStatusTypeSizeTime
kereru.co.nz200document14.2 kB38 ms
global.css200stylesheet8.1 kB12 ms
hero.jpg?width=1440&format=webp200webp96.4 kB21 ms
app.js200script24.6 kB14 ms
space-grotesk.woff2200font41.0 kB18 ms
team-offsite.jpg?width=800&format=webp200webp38.2 kB16 ms
case-kea.jpg?width=800&format=webp200webp22.9 kB15 ms
kereru-logo.svg200svg+xml3.1 kB9 ms
inter.woff2200font36.4 kB17 ms
pattern-grid.png?format=webp200webp4.8 kB11 ms
favicon.ico200x-icon1.2 kB8 ms
case-toroa.jpg?width=800&format=webp200webp27.5 kB14 ms
case-kokako.jpg?width=800&format=webp200webp31.0 kB15 ms
map-tile.png?format=webp200webp6.6 kB10 ms
× HeadersPreviewResponseInitiatorTimingCookies

Response Headers Raw

age84213

cache-controlpublic, max-age=31536000, immutable

content-typeimage/webp

via1.1 8f2a1c3e7b5d.cloudfront.net (CloudFront)

x-amz-cf-popAKL50-P1

x-cacheHit from cloudfront

Tune · ground and placement
Ground
Place

Overrides none — the file's own defaults

c2

The edge, on a globe

cutout

hover plays while hovered

The cutout companion to v1: the same live globe, drawn big on a navy ground and cut by the frame — it rises from the bottom-left and runs off the left and the bottom — with the live edge's log as a floating card at product sizes at the top-right. The pointer spins the globe and the edge nearest it goes live: a packet from the Sydney origin, three pulses, the card refills. Without a pointer it drifts east. The globe's placement is the Tune panel's own variables: X and Y its corner, Width its diameter. Rest is the southern hemisphere with Auckland live between the card and the frame.

views/components/visuals/cdn/c2.html

Static · three placements

Bento card · 320px Static
AKL50-P1 Auckland
  • hero.webpmiss120 ms
  • app.jshit11 ms
Feature row · 560px Static
AKL50-P1 Auckland
  • hero.webpmiss120 ms
  • app.jshit11 ms
Hero figure · 880px Static
AKL50-P1 Auckland
  • hero.webpmiss120 ms
  • app.jshit11 ms

Animated · hover

Feature row · 560px
AKL50-P1 Auckland
  • hero.webpmiss120 ms
  • app.jshit11 ms
Tune · ground and placement
Ground
Place

Overrides none — the file's own defaults